<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>M4Q Position and size - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#_func_height">height()</a></li>
                    <li class="toc-entry"><a href="#_func_width">width()</a></li>
                    <li class="toc-entry"><a href="#_func_outer_height">outerHeight()</a></li>
                    <li class="toc-entry"><a href="#_func_outer_width">outerWidth()</a></li>
                    <li class="toc-entry"><a href="#_func_offset">offset()</a></li>
                    <li class="toc-entry"><a href="#_func_position">position()</a></li>
                    <li class="toc-entry"><a href="#_func_padding">padding()</a></li>
                    <li class="toc-entry"><a href="#_func_margin">margin()</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>M4Q Position ans size</h1>
                <p class="text-leader">
                    Manipulate element position and size.
                </p>

                <!-- ads-html -->

                <h3 id="_func_height">height()</h3>
                <p>
                    Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
                </p>
                <pre><code>
                    &lt;div id="div" style="height: 100px;"&gt;This a example text&lt;/div&gt;
                </code></pre>
                <pre><code>
                    console.log( $("#div").height() ); // Outputs: 100

                    $("#div").height(200); // Set div height to 200px;
                    $("#div").height("100%"); // Set div height to 100%;
                    $("#div").height("4rem"); // Set div height to 64px (if 1rem == 16px);
                </code></pre>

                <h3 id="_func_width">width()</h3>
                <p>
                    Get the current computed width for the first element in the set of matched elements or set the width of every matched element.
                </p>
                <pre><code>
                    &lt;div id="div" style="width: 100px;"&gt;This a example text&lt;/div&gt;
                </code></pre>
                <pre><code>
                    console.log( $("#div").width() ); // Outputs: 100

                    $("#div").width(200); // Set div width to 200px;
                    $("#div").width("100%"); // Set div width to 100%;
                    $("#div").width("4rem"); // Set div width to 64px (if 1rem == 16px);
                </code></pre>

                <h3 id="_func_outer_height">outerHeight()</h3>
                <p>
                    Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.
                    To include margin in height calc, you must pass true to function as first argument.
                </p>
                <pre><code>
                    &lt;div id="div" style="width: 100px; height: 100px; margin: 10px;"&gt;
                        This a example text
                    &lt;/div&gt;
                </code></pre>
                <pre><code>
                    console.log( $("#div").outerHeight() ); // Outputs: 100
                    console.log( $("#div").outerHeight(true) ); // Outputs: 120

                    $("#div").outerHeight(200); // set height to 200px;
                    $("#div").outerHeight("100%"); // set height to 100%;
                    $("#div").outerHeight("4rem"); // set height to 64px, if 1rem eq 16px;
                </code></pre>

                <h3 id="_func_outer_width">outerWidth()</h3>
                <p>
                    Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.
                    To include margin in width calc, you must pass true to function as first argument.
                </p>
                <pre><code>
                    &lt;div id="div" style="width: 100px; height: 100px; margin: 10px;"&gt;
                        This a example text
                    &lt;/div&gt;
                </code></pre>
                <pre><code>
                    console.log( $("#div").outerWidth() ); // Outputs: 100
                    console.log( $("#div").outerWidth(true) ); // Outputs: 120

                    $("#div").outerWidth(200); // set width to 200px;
                    $("#div").outerWidth("100%"); // set width to 100%;
                    $("#div").outerWidth("4rem"); // set width to 64px, if 1rem eq 16px;
                </code></pre>

                <h3 id="_func_padding">padding()</h3>
                <p>
                    Get the current computed padding for the first element. Element must be visible. Returned value contains integer values for side padding.
                </p>
                <pre><code>
                    &lt;div id="div" style="padding: 10px 20px;"&gt;
                        This a example text
                    &lt;/div&gt;

                    console.log($('#div').padding()); // Outputs: {left: 20, right: 20, top: 10, bottom: 10}
                    console.log($('#div').padding('before')); // Outputs: return padding for pseudo element
                    console.log($('#div').padding('after')); // Outputs: return padding for pseudo element
                </code></pre>

                <h3 id="_func_margin">margin()</h3>
                <p>
                    Get the current computed margin for the first element. Element must be visible. Returned value contains integer values for side padding.
                </p>
                <pre><code>
                    &lt;div id="div" style="margin: 10px 20px;"&gt;
                        This a example text
                    &lt;/div&gt;

                    console.log($('#div').margin()); // Outputs: {left: 20, right: 20, top: 10, bottom: 10}
                    console.log($('#div').margin('before')); // Outputs: return padding for pseudo element
                    console.log($('#div').margin('after')); // Outputs: return padding for pseudo element
                </code></pre>

                <h3 id="_func_border">border()</h3>
                <p>
                    Get the current computed border width for the first element. Element must be visible. Returned value contains integer values for side padding.
                </p>
                <pre><code>
                    &lt;div id="div" style="border: 4px solid red;"&gt;
                        This a example text
                    &lt;/div&gt;

                    console.log($('#div').border()); // Outputs: {left: 4, right: 4, top: 4, bottom: 4}
                    console.log($('#div').border('before')); // Outputs: return padding for pseudo element
                    console.log($('#div').border('after')); // Outputs: return padding for pseudo element
                </code></pre>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>